<template>
  <div id="main">
    <div id="edit" @beforeinput="onBeforeInput" contenteditable="true">
      <span  id="placeholder" contenteditable="false" data-placeholder="请输入内容~~~"></span>
      <pre id="edit-pre"></pre>
    </div>
  </div>
</template>

<script lang='ts'>
import Editor from '../edit'
import { isTrigger } from '../utility/index'
import { reactive, toRefs, onBeforeMount, onMounted, VueElement, InputHTMLAttributes, nextTick } from 'vue'
import { def } from '@vue/shared'
export default {
  name: '',
  setup() {
    console.log('1-开始创建组件-setup')
    const data = reactive({
      placeholderStyle:'',
      placeholder:HTMLElement
      })
    onBeforeMount(() => {
      console.log('2.组件挂载页面之前执行----onBeforeMount')
    })
    onMounted(() => {
      const myEdit = document.getElementById('edit-pre') as HTMLInputElement
      const edit = new Editor(myEdit!)
      edit.init()
      console.log('3.-组件挂载到页面之后执行-------onMounted')
    })
    const methods = {
      onBeforeInput(e:any){
        // console.log(e)
        // e.preventDefault()
        // const myEdit = document.getElementById('edit') as HTMLInputElement
        // const range = document.createRange()
        // const selection:Selection = window.getSelection()!

        // console.dir(myEdit)
        // switch(e.inputType){
        //   case 'deleteContentBackward':
        //     console.log(selection.toString())
        //     if(selection.toString().length>0){
        //       selection.deleteFromDocument()
        //       // selection.removeAllRanges();//移出所有的选中范围
        //     }else{
        //       myEdit.innerText = myEdit.innerText.substring(0,myEdit.innerText.length-1)
        //     }
        //     break
        //   case 'insertText':
        //     myEdit.innerText += e.data
        //     break
        //   case 'insertCompositionText': //中文输入
        //     break
        //   default:
        //     // myEdit.innerText += e.data

        // }
        // range.selectNodeContents(myEdit)
        // range.collapse(false);//光标移到末尾
        // selection.removeAllRanges();//移出所有的选中范围
        // selection.addRange(range)
        
      },
      changeSelection(){
          //   const myEdit = document.getElementById('edit') as HTMLInputElement
          // myEdit.setSelectionRange(0,10)
      }
    }
    return {
      ...methods,
      ...toRefs(data),
    }
  },

}

</script>
<style scoped>
  #main{
    text-align: left;
  }
  #edit{
    outline: 0px solid;
  }
  /* #placeholder::before{
        content: attr(data-placeholder);
  } */
</style>